<template>
  <div id="myTaskDetail" :catchtouchmove="captcha">
    <scroll-view :style="{'height': height+'px'}" :scroll-y="true">
      <div class="task_detail_title">
        <div
          :style="{width: taskDetail_taskProcess=='' ? 'calc((100% - 90px))' : '100%'}"
          class="task_title_left"
        >
          <div class="title">
            <span>{{taskDetail.tenant_name}}[{{taskDetail.restaurant_name}}]{{ taskDetail.task_name }}</span>
            <span class="blod">
              <!-- {{taskDetail.task_mold}} -->
              <span v-if="taskDetail.task_mold === 1">高峰期</span>
              <span v-if="taskDetail.task_mold === 2">低峰期</span>
              <span v-if="taskDetail.task_mold === 3">随时</span>
              <span v-if="taskDetail.task_mold === 4">夜宵</span>
              <span v-if="taskDetail.task_mold === 5">包夜</span>
            </span>
          </div>
          <div class="money">
            <span class="font_logo">奖</span>
            <span class="money_num">￥{{ taskDetail.reward }}</span>
          </div>
        </div>
        <div class="task_title_right" v-if="taskDetail_taskProcess==''">
          <span class="sum_btn">余量：{{taskDetail.quantity||0}}</span>
          <!-- <span class="no_btn">已领完</span> -->
        </div>
      </div>
      <div class="detail_inner">
        <!--任务描述-->
        <div class="task_des border">
          <div class="des_title">
            <span>任务描述</span>
          </div>
          <div class="des_item">
            <span class="des_left name">任务名称:</span>
            <span class="des_right two">{{ taskDetail.task_name }}</span>
          </div>
          <div class="des_item">
            <span class="des_left">结束时间:</span>
            <span class="des_right">{{ taskDetail.task_end_time }}</span>
          </div>
          <div class="des_item">
            <span class="des_left">任务发起:</span>
            <span class="des_right">{{ taskDetail.tenant_name }}</span>
          </div>
          <div class="des_item van-onChange">
            <div class="des_left">是否限制报名距离:</div>
            <span
              class="des_right"
              style="line-height: 60rpx;"
            >{{taskDetail.is_restrict_distance==1?'是 小于'+ taskDetail.restrict_distance +'m':'否'}}</span>
          </div>
        </div>
        <!--任务详情-->
        <div class="task_des border">
          <div class="des_title">
            <span>任务详情</span>
          </div>
          <div class="des_item">
            <span class="des_left des_detail" v-html="taskDetail.task_content || '暂无任务详情！'"></span>
          </div>
        </div>
        <!--任务要求-->
        <div class="task_ask border">
          <div class="des_title">
            <span>任务要求</span>
          </div>
          <div class="des_item">
            <div class="taskRequirementItem">
              <div class="taskRequirementItem_sub">
                <span class="ti">
                  <img src="/static/imgs/task/tijiaorenwu.png" mode="widthFix" alt />
                </span>
                <span class="ask_time">提交时间</span>
              </div>
              <span class="tip_blue">
                <span v-if="taskDetail.is_sign == 0">任务结束前提交报告</span>
                <span v-if="taskDetail.is_sign != 0">
                  领取任务后{{
                  taskDetail.report_time_limit || 0
                  }}小时提交报告
                </span>
              </span>
            </div>
          </div>
          <div class="des_item">
            <div class="taskRequirementItem">
              <div class="taskRequirementItem_sub">
                <span class="ti">
                  <img src="/static/imgs/task/zhixingrenwu.png" mode="widthFix" alt />
                </span>
                <span class="ask_time">执行时长</span>
              </div>
              <span
                class="tip_blue"
                v-if="taskDetail.is_sign=='1'"
              >执行时间不少于{{taskDetail.task_exe_time}}小时</span>
              <span class="tip_blue" v-if="taskDetail.is_sign!='1'">无</span>
            </div>
          </div>
          <div class="des_item">
            <div class="taskRequirementItem">
              <div class="taskRequirementItem_sub">
                <span class="ti">
                  <img src="/static/imgs/task/qiantishi.png" mode="widthFix" alt />
                </span>
                <span class="ask_time">签到签出</span>
              </div>
              <span class="tip_blue">
                该任务{{
                taskDetail.is_sign == 0 ? "不需要" : "需要"
                }}签到签出
              </span>
            </div>
          </div>
        </div>
        <!--培训学习-->
        <div v-if="taskDetail.files && taskDetail.files.length" class="study border">
          <div class="des_title">
            <span>培训学习</span>
          </div>
          <div
            class="des_item"
            v-for="(file, index) in taskDetail.files"
            :key="index"
            @click="fnLearn(file)"
          >
            <div>
              <span class="des_left">{{ index + 1 }}.{{ file.title }}</span>
              <span class="icon">
                <van-icon name="arrow" />
              </span>
            </div>
          </div>
        </div>
        <!--小测试预览-->
        <div class="test_sh border" v-if="taskDetail.is_test == 1">
          <div class="des_title" @click="goTest(taskDetail)">
            <span class="test" style="border: none; text-align: left;">小测试预览</span>
            <span class="icon_inner">
              <van-icon name="arrow" />
            </span>
          </div>
        </div>
        <!--报告预览-->
        <div class="rep border">
          <div class="des_title" @click="fnQuestionnaire">
            <span class="test" style="border: none; text-align: left;">报告预览</span>
            <span class="icon_inner">
              <van-icon name="arrow" />
            </span>
          </div>
        </div>
        <!--任务轨迹-->
        <div class="task_path border" v-if="taskDetail_taskProcess != ''">
          <div class="des_title">
            <span style="border: none; text-align: left;">任务轨迹</span>
          </div>
          <div class="task_inner">
            <van-steps
              :steps="steps"
              :active="steps_renwuguiji"
              active-color="#38f"
              direction="vertical"
            />
          </div>
        </div>
      </div>
      <div class="receive_btn" v-if="taskDetail_status!=''">
        <div class="btn_all">
          <div style="height: 5px;background: #fff"></div>
          <!-- 如果状态是已领取，并且数量不为0 贼可以点击领取 -->
          <van-button
            color="linear-gradient(to right, #30b1f4, #195efc)"
            @click="fnTaskBtn(taskDetail,'lq')"
            block
            round
            v-if="taskDetail_status == 1&&taskDetail.quantity"
            class="receiver"
          >领取</van-button>
          <van-button
            color="#CCCCCC"
            block
            round
            v-if="taskDetail_status == 1&&!taskDetail.quantity"
            class="receiver"
          >已领完</van-button>
          <van-button
            v-if="taskDetail_status == 0"
            color="#CCCCCC"
            block
            round
            class="receiver"
          >任务结束</van-button>
        </div>
        <div class="btn_all" @click="receiver(2)" v-if="taskDetail_status == 2">
          <span class="res_time">
            剩余时间:
            <van-count-down
              format="DD天HH:mm:ss"
              @finish="fnTaskDetail"
              class="countDown"
              :time="taskDetail.release_time"
            />
          </span>
        </div>
      </div>
      <div class="receive_btn" v-if="taskDetail_taskProcess != ''">
        <div style="height: 5px; background: #fff;"></div>
        <div>
          <div
            class="btn_all"
            v-if="taskDetail_taskProcess == 0||!taskDetail.receive_time&&taskStatus === '1'"
          >
            <van-button
              color="#ccc"
              @click="fnTaskBtn(taskDetail,'blq')"
              block
              round
              class="receiver"
            >不领取</van-button>
            <van-button
              color="linear-gradient(to right, #30b1f4, #195efc)"
              @click="fnTaskBtn(taskDetail, 'qdlq')"
              block
              round
              class="receiver"
            >确认领取</van-button>
          </div>
          <div class="btn_all" v-else-if="taskDetail_taskProcess == 1||taskDetail_taskProcess == 5">
            <span class="res_time" @click="fnTaskBtn(taskDetail, 'txbg')">
              <span class="count">
                <span>&nbsp;&nbsp;剩余时间:</span>
                <van-count-down
                  format="DD天HH:mm:ss"
                  class="countDown"
                  :time="taskDetail.report_surplus_date*1000"
                />
              </span>
              <span class="report">填写报告</span>
            </span>
            <van-button
              color="#ccc"
              @click="fnTaskBtn(taskDetail,'qt_qx')"
              block
              round
              style="margin-left:10px"
              class="receiver"
            >取消</van-button>
          </div>
          <div class="btn_all" v-else-if="taskDetail_taskProcess == 2">
            <van-button
              color="#ccc"
              @click="fnTaskBtn(taskDetail,'qt_qx')"
              block
              round
              class="receiver"
            >取消</van-button>
            <van-button
              color="linear-gradient(to right, #30b1f4, #195efc)"
              @click="fnTaskBtn(taskDetail, 'txcs')"
              block
              round
              class="receiver"
            >填写测试</van-button>
          </div>
          <div class="btn_all" v-else-if="taskDetail_taskProcess == 3">
            <van-button
              color="#ccc"
              @click="fnTaskBtn(taskDetail,'qt_qx')"
              block
              round
              class="receiver"
            >取消</van-button>
            <van-button
              color="linear-gradient(to right, #30b1f4, #195efc)"
              @click="fnTaskBtn(taskDetail, 'qd')"
              block
              round
              class="receiver"
            >签到</van-button>
          </div>
          <div class="btn_all" v-else-if="taskDetail_taskProcess == 4">
            <!-- <van-button
              color="#ccc"
              @click="fnTaskBtn(taskDetail,'qt_qx')"
              block
              round
              class="receiver"
            >取消</van-button>-->
            <van-button
              color="linear-gradient(to right, #30b1f4, #195efc)"
              @click="fnTaskBtn(taskDetail, 'qt')"
              block
              round
              class="receiver"
            >签出</van-button>
          </div>
          <div class="btn_all" v-else-if="taskDetail_taskProcess == 6">
            <van-button color="#ccc" block round class="receiver">审核中</van-button>
          </div>
          <div class="btn_all" v-else-if="taskDetail_taskProcess == 7">
            <van-button color="#ccc" block round class="receiver">已通过</van-button>
          </div>
          <div
            class="btn_all"
            v-else-if="taskDetail_taskProcess == 8"
            @click="fnTaskBtn(taskDetail, 'tjbg')"
          >
            <span class="res_time">
              <span class="count">
                <span>&nbsp;&nbsp;剩余时间:</span>
                <van-count-down
                  format="DD天HH:mm:ss"
                  class="countDown"
                  :time="taskDetail.report_surplus_date*1000"
                />
              </span>
              <span class="report">提交报告</span>
            </span>
          </div>
          <div class="btn_all" v-else-if="taskDetail_taskProcess == 9">
            <van-button color="#ccc" block round class="receiver">已发放奖励</van-button>
          </div>
          <div class="btn_all" v-else-if="taskDetail_taskProcess == -5">
            <van-button color="#ccc" block round class="receiver">已结束</van-button>
          </div>
          <div class="btn_all" v-else-if="taskDetail_taskProcess == -6">
            <van-button color="#ccc" block round class="receiver">已拒绝</van-button>
          </div>
          <div
            class="btn_all"
            v-else-if="taskDetail_taskProcess == -4||taskDetail_taskProcess == -3"
          >
            <van-button color="#ccc" block round class="receiver">已取消</van-button>
          </div>
          <div class="btn_all" v-else-if="taskDetail_taskProcess == -2">
            <van-button color="#ccc" block round class="receiver">未完成</van-button>
          </div>
          <div class="btn_all" v-else-if="taskDetail_taskProcess == -1">
            <van-button color="#ccc" block round class="receiver">被拒绝</van-button>
          </div>
        </div>
      </div>
    </scroll-view>
    <!--弹窗-->
    <van-dialog id="van-dialog" />
    <!--滑块组件-->
    <ne-captcha
      id="captcha"
      captcha-id="a242c51a9ca04c6b8e578071f190199c"
      width="300px"
      @verify="handlerVerify"
      @close="handlerClose"
    />
  </div>
</template>
<script>
import Dialog from "../../../static/vant/dialog/dialog";
import formatText from "../../common/components/formatText";
import Toast from "../../../static/vant/toast/toast";
import util from "../../utils/tools";
export default {
  components: { formatText },
  data() {
    return {
      steps_renwuguiji: 0,
      taskDetail: {},
      taskDetail_status: "",
      taskDetail_taskProcess: "",
      isLogin: false,
      openid: "",
      active: 1,
      taskStatus: "",
      radio: "1", // 是否限制报名距离 单选
      steps: [
        {
          text: "领取任务",
          desc: ""
          // 2019.01.20  01:20:30 领取任务
        },
        {
          text: "签到",
          desc: ""
          // 2019.01.21  01:12:30 签到成功
        },
        {
          text: "签出",
          desc: ""
          // 2019.01.22  02:20:30 签出成功
        },
        {
          text: "提交报告",
          desc: ""
          // 2019.01.23  03:20:40 提交成功
        },
        {
          text: "审核",
          desc: ""
          // 2019.01.24  16:20:30 审核通过
        },
        {
          text: "奖励发放",
          desc: ""
        }
        // ,
        // {
        //   text: '完成',
        //   desc: ''
        // }
      ],
      height: "",
      captcha: false // captcha验证是否打开
    };
  },
  methods: {
    // 单选
    onChange(event) {
      this.radio = event.mp.detail;
    },
    // 详情
    fnTaskDetail() {
      let newData = this.taskDetail_taskProcess
        ? {
          id: wx.getStorageSync("taskId"),
          type: "2"
        }
        : {
          id: wx.getStorageSync("taskId")
        };
      this.$http
        .post({
          url: "/mobile/api/taskinfo",
          data: newData
        })
        .then(res => {
          if (res.code == "RX0000") {
            // res.data.countDow = this.fnCountDown(
            //   res.data.task_end_time.replace(/-/g, "/")
            // ); // 计算剩余时间倒计时
            res.data.release_time = this.fnCountDown(
              res.data.release_time.replace(/-/g, "/")
            );
            const task_end_month =
              new Date(res.data.task_end_time.replace(/\-/g, "/")).getMonth() +
                1 >
                10
                ? new Date(
                  res.data.task_end_time.replace(/\-/g, "/")
                ).getMonth() + 1
                : "0" +
                (new Date(
                  res.data.task_end_time.replace(/\-/g, "/")
                ).getMonth() +
                  1);
            const task_end_date = new Date(
              res.data.task_end_time.replace(/\-/g, "/")
            ).getDate();
            res.data.task_end_time = task_end_month + "." + task_end_date;
            res.data.reward = util.formatCurrency(res.data.reward);
            this.taskDetail = res.data;
            //这里如果是我的任务点进来这个值可能发生变化 所以重新取 当初不知道为什么把这个值传了进来 所欲就先这么处理了
            if (!this.taskDetail_status) {
              this.taskDetail_taskProcess = this.taskDetail.task_process;
            }
            this.steps[0].desc = !this.taskDetail.receive_time
              ? "未领取"
              : this.taskDetail.receive_time || "" + "";
            this.steps[1].desc = !this.taskDetail.execute_sign_time
              ? "未签到"
              : this.taskDetail.execute_sign_time || "" + "";
            this.steps[2].desc = !this.taskDetail.execute_sign_out_time
              ? "未签出"
              : this.taskDetail.execute_sign_out_time || "" + "";
            this.steps[3].desc = !this.taskDetail.report_time
              ? "未提交"
              : this.taskDetail.report_time || "" + "";
            this.steps[4].desc = !this.taskDetail.report_apply_time
              ? "未审核"
              : this.taskDetail.report_apply_time || "" + "";
            this.steps[5].desc = !this.taskDetail.reward_time
              ? "未发放"
              : this.taskDetail.reward_time || "" + "";
            // this.steps[6].desc = this.taskDetail.receive_time == '0'?'未领取':this.taskDetail.receive_time+' 完成'
            if (this.taskDetail.is_sign != 1) {
              // 如果is_sign==0 代表此任务不需要签到
              this.steps.splice(1, 2);
            }

            for (let i = 0; i < this.steps.length; i++) {
              if (this.steps[i].desc.indexOf("未") !== -1) {
                this.steps_renwuguiji = i - 1;
                return false;
              }
              if (this.steps.length - 1 === i) {
                this.steps_renwuguiji = i;
              }
            }
          } else {
            wx.showToast({
              title: res.data
            });
          }
        });
    },
    // 格式化时间戳
    fnCountDown(t) {
      let _sTime = new Date().getTime(); //现在时间（时间戳）
      let _eTime = new Date(t).getTime();
      return _eTime - _sTime > 0 ? _eTime - _sTime : "00:00:00";
    },
    fnLearn(file) {
      if (file.file_type === 2) {
        wx.navigateTo({
          url: `/pages/learnDetail/main?com_id=${file.com_id}&file_type=${
            file.file_type
            }`
        });
      } else if (file.file_type === 1) {
        this.$http
          .post({
            url: "/mobile/api/file/detail",
            data: {
              com_id: file.com_id,
              file_type: file.file_type
            }
          })
          .then(res => {
            if (res.code == "RX0000") {
              this.previewFile(res.data.access_path);
            } else {
              wx.showToast({
                title: res.data
              });
            }
          });
      }
    },
    // 预览
    previewFile(_url) {
      const tost = Toast.loading({
        mask: true,
        message: "文件加载中..."
      });
      wx.downloadFile({
        url: _url, // 可以是后台传过来的路径
        success: function (res) {
          Toast.clear();
          const filePath = res.tempFilePath;
          wx.openDocument({
            filePath: filePath,
            success: function (res) {
              // 成功
            }
          });
        }
      });
    },
    goTest(taskDetail) {
      let _obj = {
        id: taskDetail.id,
        type: 1,
        state: 1 // state == 1 是从我的任务详情进入的小测试预览
      };
      wx.setStorageSync("testObj", _obj); // 获取 小测试需要的参数
      wx.navigateTo({
        url: "/pages/testDetail/main"
      });
    },
    goReport(index) {
      wx.navigateTo({
        url: "/pages/reportDetail/main"
      });
    },
    /*
     * 接口 报告预览 /mobile/api/questionnaire/
     * 参数 id 任务ID
     * type 1未提交答案查看 2已提交答案查看
     */
    fnQuestionnaire() {
      wx.navigateTo({
        url: `/pages/questionLook/main?id=${this.taskDetail.id}&receive_id=${
          this.taskDetail.receive_id
          }&type=2`
      });
    },
    // 验证码验证结果回调
    handlerVerify: function (ev) {
      // 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detail
      if (!ev.mp.detail[0]) {
        // 验证成功 调用领取任务接口 或者阿里认证页面
        let _isAuth = wx.getStorageSync("userInfo").auth_status;
        if (_isAuth) {
          if (this.taskDetail_status == 1) {
            this.$http
              .post({
                url: "/mobile/api/receivetask",
                data: {
                  customer_id: wx.getStorageSync("userInfo").customer_id,
                  id: this.taskDetail.id,
                  lnglat: wx.getStorageSync("lnglat")
                }
              })
              .then(res => {
                if (res.code == "RX0000") {
                  Dialog.alert({
                    confirmButtonText: "确认",
                    message: res.data.msg
                  }).then(() => {
                    this.fnTaskDetail();
                  });
                } else {
                  wx.showToast({
                    icon: "none",
                    title: res.msg
                  });
                }
              });
            // })
            // .catch(() => { });
          } else {
            Dialog.alert({
              message: "该任务已被领完，下次早点来哦！☹"
            }).then(() => { });
          }
        } else {
          Dialog.confirm({
            confirmButtonText: "去实名",
            cancelButtonText: "取消",
            message: "您还未做实名认证，请先完成实名认证"
          })
            .then(res => {
              wx.navigateTo({
                url: "/pages/realName/main"
              });
            })
            .catch(() => { });
        }
      } else {
        // 验证失败
        // 请不要在验证失败中调用reset，验证码内部会进行相应处理
      }
    },
    handlerClose() {
      this.$root.$mp.page.selectComponent("#captcha").reset();
      this.captcha = false;
    },
    // 任务按钮
    fnTaskBtn(obj, btn) {
      let _level = wx.getStorageSync("userInfo").level;
      let _paramObj = {
        url: "",
        data: { id: "" }
      };
      _paramObj.data.id = obj.id;
      if (btn === "lq") {
        //领取的时候滑块校验一下
        this.show = true;
        this.$root.$mp.page.selectComponent("#captcha").popup();
        this.captcha = true;
      }
      // if(obj.task_process==0 && _level) {
      if (btn === "qdlq") {
        // 特邀嘉宾 如果是我的任务列表展示的任务 都掉特邀嘉宾领取任务的接口
        _paramObj.url = "/mobile/api/claimtask";
        _paramObj.data.id = obj.receive_id;
        this.fnReceiverTask(obj, _paramObj, `确定领取${obj.task_name}任务`);
      }
      if (btn === "blq") {
        if (obj.task_process == 0 && _level === 40) {
          _paramObj.url = "/mobile/api/cancelspecify";
          _paramObj.data.id = obj.receive_id;
          this.fnReceiverTask(
            obj,
            _paramObj,
            `确定选择不领取${obj.task_name}任务?`
          );
        } else {
          _paramObj.url = "/mobile/api/canceltask";
          _paramObj.data.id = obj.receive_id;
          (_paramObj.data.customer_id = wx.getStorageSync(
            "userInfo"
          ).customer_id),
            this.fnReceiverTask(
              obj,
              _paramObj,
              `确定选择不领取${obj.task_name}任务?`
            );
        }
      }
      if (btn === "qd") {
        _paramObj.url = "/mobile/api/tasksign";
        (_paramObj.data.customer_id = wx.getStorageSync(
          "userInfo"
        ).customer_id),
          // _paramObj.data.lnglat = wx.getStorageSync('userInfo').lnglat,
          (_paramObj.data.lnglat = wx.getStorageSync("lnglat")),
          (_paramObj.data.id = obj.receive_id),
          (_paramObj.data.type = 0);
        this.fnReceiverTask(obj, _paramObj, "您在签到时必须使用本手机");
      }
      if (btn === "qt") {
        _paramObj.url = "/mobile/api/tasksign";
        (_paramObj.data.customer_id = wx.getStorageSync(
          "userInfo"
        ).customer_id),
          (_paramObj.data.lnglat = wx.getStorageSync("lnglat")),
          (_paramObj.data.id = obj.receive_id),
          (_paramObj.data.type = 1);
        this.fnReceiverTask(obj, _paramObj, "您在签退时必须使用本手机");
      }
      if (btn === "qt_qx") {
        _paramObj.url = "/mobile/api/canceltask";
        _paramObj.data.customer_id = wx.getStorageSync("userInfo").customer_id;
        _paramObj.data.id = obj.receive_id;
        this.canceltaskTask(obj, _paramObj);
      }
      if (btn === "txbg") {
        wx.navigateTo({
          url: `/pages/questionAndReport/main?id=${obj.id}&receive_id=${
            obj.receive_id
            }&type=1&receive_time=${obj.receive_time}`
        });
      }
      if (btn === "tjbg") {
        wx.navigateTo({
          url: `/pages/questionAndReport/main?id=${obj.id}&receive_id=${
            obj.receive_id
            }&type=2&receive_time=${obj.receive_time}`
        });
      }
      if (btn === "txcs") {
        // id	String	是	门店任务ID
        // type	Int	获取类型	1未提交答案查看
        // 2已提交答案查看
        let _obj = {
          id: obj.id,
          rid: obj.receive_id,
          type: 1
        };
        wx.setStorageSync("testObj", _obj); // 获取 小测试需要的参数
        wx.navigateTo({
          url: "/pages/testDetail/main"
        });
      }
    },
    // 领取任务
    fnReceiverTask(obj, paramObj, message, textbtn) {
      let _isAuth = wx.getStorageSync("userInfo").auth_status;
      if (_isAuth) {
        Dialog.confirm({
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          message: message
        })
          .then(() => {
            this.$http
              .post({
                url: paramObj.url,
                data: paramObj.data
              })
              .then(res => {
                if (res.code == "RX0000") {
                  this.fnTaskDetail();
                } else {
                  wx.showToast({
                    icon: "none",
                    title: res.msg
                  });
                }
              });
          })
          .catch(() => { });
      } else {
        Dialog.confirm({
          confirmButtonText: "去实名",
          cancelButtonText: "取消",
          message: "您还未做实名认证，请先完成实名认证"
        })
          .then(res => {
            wx.navigateTo({
              url: "/pages/realName/main"
            });
          })
          .catch(() => { });
      }
    },
    // 取消任务
    canceltaskTask(obj, paramObj) {
      Dialog.confirm({
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        message: "您确定要取消" + obj.task_name + "任务？"
      })
        .then(() => {
          this.$http
            .post({
              url: paramObj.url,
              data: paramObj.data
            })
            .then(res => {
              if (res.code == "RX0000") {
                wx.navigateBack();
              } else {
                wx.showToast({
                  icon: "none",
                  title: res.msg
                });
              }
            });
        })
        .catch(() => { });
    }
  },
  onLoad(option) {
    this.steps = [
      {
        text: "领取任务",
        desc: ""
        // 2019.01.20  01:20:30 领取任务
      },
      {
        text: "签到",
        desc: ""
        // 2019.01.21  01:12:30 签到成功
      },
      {
        text: "签出",
        desc: ""
        // 2019.01.22  02:20:30 签出成功
      },
      {
        text: "提交报告",
        desc: ""
        // 2019.01.23  03:20:40 提交成功
      },
      {
        text: "审核",
        desc: ""
        // 2019.01.24  16:20:30 审核通过
      },
      {
        text: "奖励发放",
        desc: ""
      }
      // ,
      // {
      //   text: '完成',
      //   desc: ''
      // }
    ];
    if (option.task_process) {
      // 我的任务点进来
      this.taskDetail_taskProcess = option.task_process;
      this.taskDetail_status = "";
      this.taskStatus = option.taskStatus;
    } else {
      // 首页点进来
      this.taskDetail_status = option.status;
      this.taskDetail_taskProcess = "";
    }
    wx.setNavigationBarTitle({
      title: this.taskDetail_taskProcess != "" ? "我的任务" : "任务详情"
    });
    // 获取屏幕的高度
    wx.getSystemInfo({
      success: res => {
        this.height = res.windowHeight;
      }
    });
  },
  onShow() {
    console.log("on show");
    this.fnTaskDetail();
  }
};
</script>
<style lang="less">
#myTaskDetail {
  width: 100%;
  .task_detail_title {
    min-height: 73px;
    border-bottom: 10px solid #f9f9f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    padding-left: 18px;
    .task_title_left {
      // width: ;
      .title {
        color: #333333;
        padding: 18px 0 0 0;
        font-size: 14px;
        & > span {
          display: inline-block;
        }
        .blod {
          font-weight: bolder;
        }
      }
      .money {
        display: flex;
        align-items: center;
        padding: 13px 0 11px 0;

        & > span {
          display: inline-block;
        }
        .font_logo {
          width: 20px;
          text-align: center;
          border-radius: 8px 8px 8px 0px;
          background: #db4a37;
          font-size: 10px;
          color: #fff;
        }
        .money_num {
          width: 50px;
          color: #db4a37;
          box-sizing: border-box;
          padding-left: 4px;
          font-size: 14px;
        }
      }
    }
    .task_title_right {
      width: 90px;
      height: 100%;
      text-align: center;
      line-height: 73px;
      .sum_btn {
        display: inline-block;
        width: 54px;
        height: 18px;
        line-height: 18px;
        background: #226df0;
        color: #fff;
        font-size: 10px;
        border-radius: 9px;
        text-align: center;
      }
      .no_btn {
        display: inline-block;
        width: 54px;
        height: 18px;
        line-height: 18px;
        background: #9a9898;
        color: #fff;
        font-size: 10px;
        border-radius: 9px;
        text-align: center;
      }
    }
  }
  .detail_inner {
    .border {
      border: 5px solid #f9f9f9;
      padding: 15px;
      box-sizing: border-box;
    }
    .task_des {
      width: 100%;
      .des_title {
        height: 30px;
        line-height: 30px;
        & > span {
          width: 76px;
          height: 14px;
          line-height: 14px;
          border-left: 2px solid #5696ff;
          display: inline-block;
          font-weight: bolder;
          font-size: 14px;
          text-indent: 6px;
        }
      }
      .des_item {
        margin-left: 8px;
        box-sizing: border-box;

        .des_left {
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          color: #333;
          &.name {
            float: left;
          }
          .first_title {
            display: inline-block;
            color: #5696ff;
            font-weight: bolder;
          }
          &.des_detail {
            width: 100%;
          }
        }
        .des_right {
          margin-left: 12px;
          font-size: 12px;
          color: #333;
          text-align: left;
          &.two {
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-pack: center;
            -webkit-box-align: left;
            -webkit-line-clamp: 2;
            overflow: hidden;
            width: 79%;
            float: left;
            height: 33px;
          }
        }
      }
    }

    .task_ask {
      .des_title {
        height: 30px;
        line-height: 30px;
        & > span {
          width: 76px;
          height: 14px;
          line-height: 14px;
          text-align: center;
          border-left: 2px solid #5696ff;
          display: inline-block;
          font-weight: bolder;
          font-size: 14px;
        }
      }
      .des_item {
        height: 30px;
        line-height: 30px;
        margin-left: 8px;
        box-sizing: border-box;
        .ti {
          display: inline-block;
          text-align: center;
          width: 16px;
          height: 16px;
          line-height: 16px;
          color: #5696ff;
          font-size: 10px;
          img {
            width: 16px;
          }
        }
        .ask_time {
          width: 70px;
          font-size: 12px;
          color: #333;
          text-align: center;
          margin-left: 10px;
        }
        .tip_blue {
          width: 197px;
          font-size: 10px;
          color: #5696ff;
          box-shadow: 0px 1.5px 3px rgba(0, 0, 0, 0.05);
          display: inline-block;
          border-radius: 17px;
          text-align: center;
          height: 23px;
          line-height: 23px;
        }
      }
    }
    .study {
      overflow: hidden;
      .des_title {
        height: 20px;
        line-height: 20px;
        padding: 0 0 20rpx 0;

        & > span {
          width: 76px;
          height: 14px;
          line-height: 14px;
          border-left: 2px solid #5696ff;
          text-align: center;
          display: inline-block;
          font-weight: bolder;
          font-size: 14px;
        }
        .icon_inner {
          display: block;
          float: right;
          color: #999;
        }
      }
      .des_item {
        height: 30px;

        line-height: 30px;
        margin-left: 8px;
        box-sizing: border-box;
        .des_left {
          font-size: 12px;
          color: #333;
          text-align: left;
          float: left;

          width: 80%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: left;
        }
        .icon {
          display: block;
          float: right;
          color: #999;
        }
      }
    }
    .test_sh {
      .des_title {
        height: 20px;
        line-height: 20px;
        & > .test {
          width: 88px;
          height: 14px;
          line-height: 14px;
          border-left: 2px solid #5696ff;
          text-align: center;
          display: inline-block;
          font-weight: bolder;
          font-size: 14px;
        }
        .icon_inner {
          display: block;
          float: right;
          color: #999;
        }
      }
    }
    .rep {
      .des_title {
        height: 20px;
        line-height: 20px;
        & > .test {
          width: 76px;
          height: 14px;
          line-height: 14px;
          border-left: 2px solid #5696ff;
          text-align: center;
          display: inline-block;
          font-weight: bolder;
          font-size: 14px;
        }
        .icon_inner {
          display: block;
          float: right;
          color: #999;
        }
      }
    }
    .task_path {
      .des_title {
        height: 20px;
        line-height: 20px;
        & > span {
          width: 76px;
          height: 14px;
          line-height: 14px;
          border-left: 2px solid #5696ff;
          text-align: center;
          display: inline-block;
          font-weight: bolder;
          font-size: 14px;
        }
        .icon_inner {
          display: block;
          float: right;
          color: #999;
        }
      }
      .task_inner {
        overflow: hidden;
        .van-step__title {
          /*&>view{
              display: inline-block;
            }*/
          overflow: hidden;
          font-size: 12px;
          :nth-child(1) {
            float: left;
          }
          :nth-child(2) {
            float: right;
          }
        }
      }
    }
    .taskRequirementItem {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 8px;
      .taskRequirementItem_sub {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .ask_time {
          width: auto !important;
          text-align: left !important;
          margin-left: 5px !important;
        }
      }
      .taskRequirementItem:nth-child(1) {
        margin-top: 0;
      }
    }
  }

  .receive_btn {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 12px 0;
    .receiver {
      flex: 1;
      .van-button--round {
        height: 32px;
        flex: 1;
      }
    }
    .btn_all {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30px;
      box-sizing: border-box;
      .receiver {
        &:nth-of-type(2) {
          margin-left: 10px;
        }
      }
      & > span {
        display: block;
        height: 30px;
        font-size: 14px;
        line-height: 30px;
        text-align: center;
        margin: 0 auto;
      }
      .res_time {
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .res_time > .count {
        flex: 1;
        display: inline-flex;
        color: #5696ff;
        border-radius: 10px 0 0 10px;
        padding: 0 9px;
        background: #cde1ff;
      }
      .res_time .report {
        display: inline-block;
        background: linear-gradient(
          90deg,
          rgba(46, 179, 251, 1) 0%,
          rgba(25, 91, 252, 1) 100%
        );
        border-radius: 0 10px 10px 0;
        padding: 0 9px;
        color: #fff;
      }
      .sub_rep {
        width: 70px;
        background: linear-gradient(to right, #2eb3fb, #195bfc);
        color: #fff;
        border-radius: 0px 15px 15px 0px;
      }
    }
  }
  .receive_btnMy {
    .empty_btn {
      width: 65px;
      margin-left: 120px;
    }
    .status_show {
      width: 65px;
      font-size: 10px;
      margin-left: 10px;
      color: #666;
      text-align: right;
    }
    .payment {
      width: 75px;
      font-size: 10px;
      margin-left: 10px;
      color: #db4a37;
      text-align: right;
    }
    .sign_out {
      width: 65px;
      border-radius: 10px;
      margin-left: 10px;
      color: #5696ff;
      border: 1px solid #5696ff;
    }
    .write_rep {
      width: 65px;
      border-radius: 10px;
      margin-left: 120px;
      color: #5696ff;
      border: 1px solid #5696ff;
    }
    .sign_in {
      width: 65px;
      border-radius: 10px;
      margin-left: 120px;
      color: #5696ff;
      border: 1px solid #5696ff;
    }
    .cabcel_btn {
      width: 65px;
      border-radius: 10px;
      margin-left: 10px;
      color: #666;
      border: 1px solid #ccc;
    }
    .res_time {
      margin-left: 90px;
      width: 118px;
      background: #cde1ff;
      color: #5696ff;
      border-radius: 10px 0 0 10px;
    }
    .sub_rep {
      width: 60px;
      background: linear-gradient(to right, #2eb3fb, #195bfc);
      color: #fff;
      border-radius: 0px 10px 10px 0px;
    }
  }
}
.van-onChange {
  display: flex;
  width: 100%;
  // flex-direction:row;
}
.van-radio__icon--square {
  font-size: 12px !important;
  border-radius: 3px;
}
.distance {
  background: #dddddd;
  color: #fff;
  width: 34px;
  height: 10px;
  font-size: 8px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 11px;
  text-align: center;
  margin: 5px 0 0 3px;
  border-radius: 10px;
}
.van-radio-group {
  display: flex;
  // line-height: 30px;
  padding-top: 5px;
  box-sizing: border-box;
  font-size: 12px;
}
.van-radio {
  margin-left: 25px;
}
</style>
